<html>
<head>
<title>Test the media query "display-mode" features.</title>
<script src="../../fullscreen/full-screen-test.js"></script>
<script>
    if (window.testRunner) {
        testRunner.dumpAsText();
        testRunner.waitUntilDone();
    }

    function log(m) {
        document.getElementById('results').innerHTML += m + '<br>';
    }

    function testQueries() {
        var queries = [
            "(display-mode)",
            "(display-mode: browser)",
            "(display-mode: minimal-ui)",
            "(display-mode: standalone)",
            "(display-mode: fullscreen)",
            ];
        for (var index=0; index < queries.length; index++) {
            log("Query &quot;" + queries[index] + "&quot: " +
                window.matchMedia(queries[index]).matches);
        }
    }

    function runTests() {
        var div = document.querySelector("div");
        document.onwebkitfullscreenchange = function() {
            log("------------- entered fullscreen -------------");
            testQueries();

            document.onwebkitfullscreenchange = function() {
                log("------------- left fullscreen -------------");
                testQueries();
                if (window.testRunner)
                    testRunner.notifyDone();
            }
            document.exitFullscreen();
        }
        runWithKeyDown(function() {
            log("------------- before entering fullscreen -------------");
            testQueries();
            div.webkitRequestFullscreen();
        });
    }
</script>
</head>
<body onload="runTests()">
    <p>Test the <a href="http://w3c.github.io/manifest/#the-display-mode-media-feature">(display-mode: ...)</a>
    media features while the browser window entering/leaving fullscreen mode.</p>
    <div id="results"></div>
</body>
</html>
